<template>
	<view>
		<button @click="wxlogin">登录</button>
		<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">用户头像</button>
		<!-- <button open-type="nickname" @chooseavatar="onChooseAvatar">用户昵称</button> -->
		<input type="nickname" @blur="bindblur" @input="bindinput" placeholder="输入用户昵称">
		<view>获取用户名: {{ nicknamestr }}</view>
		<button @click="uploadImg">上传图片</button>
	</view>
</template>

<script setup>
	import {
		login,
		syncWxUserInfo,
		uploadImages
	} from '@/request/api.js'
	import {
		ref
	} from "vue";
	import { useStore } from '@/store/index.js';
	const store = useStore();
	const wxlogin = () => {
		login().then(res => {
			let { entity } = res;
			store.v_userInfo = entity;
		})
	};
	const onChooseAvatar = async (e) => {
		let { avatarUrl } = e.detail;
		let imgUrl = await uploadImages(avatarUrl);
		syncWxUserInfo({imgUrl}).then(res => {
			
		})
	};
	const nicknamestr = ref('');
	const bindblur = (e) => {
		nicknamestr.value = e.detail.value;
	}
	const bindinput = (e) => {
		nicknamestr.value = e.detail.value;
	}

	const uploadImg = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				var tempFilePaths = res.tempFilePaths;
				for (var i = 0; i < res.tempFilePaths.length; i++) {
					//显示消息提示框
					uni.showLoading({
						mask: true
					})
					uploadImages(res.tempFilePaths[i]).then(res => {
						console.log(res);
						uni.hideLoading();
					}).catch(error => {
						
					})
				}
			}
		})
	}
</script>
<style>

</style>